<template>
  <div class="about-settings space-y-6">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-foreground mb-2 flex items-center">
        <i class="i-mdi-information mr-3 w-6 h-6" />
        {{ t('settings.about.title') }}
      </h1>
      <p class="text-muted-foreground">{{ t('settings.about.description') }}</p>
    </div>

    <!-- 应用信息 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <div class="flex items-center justify-center mb-6">
        <div
          class="w-24 h-24 bg-gradient-to-br from-primary to-primary/60 rounded-2xl flex items-center justify-center">
          <i class="i-mdi-robot w-12 h-12 text-primary-foreground" />
        </div>
      </div>

      <div class="text-center mb-6">
        <h2 class="text-3xl font-bold text-foreground mb-2">{{ appInfo.name }}</h2>
        <p class="text-lg text-muted-foreground mb-4">{{ appInfo.description }}</p>
        <div class="inline-flex items-center px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium">
          {{ t('settings.about.version') }} {{ appInfo.version }}
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="text-center p-4 bg-muted/20 rounded-lg">
          <i class="i-mdi-calendar w-6 h-6 text-primary mx-auto mb-2" />
          <div class="text-sm text-muted-foreground">{{ t('settings.about.releaseDate') }}</div>
          <div class="font-medium text-foreground">{{ appInfo.releaseDate }}</div>
        </div>

        <div class="text-center p-4 bg-muted/20 rounded-lg">
          <i class="i-mdi-code-tags w-6 h-6 text-primary mx-auto mb-2" />
          <div class="text-sm text-muted-foreground">{{ t('settings.about.buildNumber') }}</div>
          <div class="font-medium text-foreground">{{ appInfo.buildNumber }}</div>
        </div>

        <div class="text-center p-4 bg-muted/20 rounded-lg">
          <i class="i-mdi-electron-framework w-6 h-6 text-primary mx-auto mb-2" />
          <div class="text-sm text-muted-foreground">Electron</div>
          <div class="font-medium text-foreground">{{ appInfo.electronVersion }}</div>
        </div>

        <div class="text-center p-4 bg-muted/20 rounded-lg">
          <i class="i-mdi-nodejs w-6 h-6 text-primary mx-auto mb-2" />
          <div class="text-sm text-muted-foreground">Node.js</div>
          <div class="font-medium text-foreground">{{ appInfo.nodeVersion }}</div>
        </div>
      </div>
    </div>

    <!-- 版本更新 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-update mr-2 w-5 h-5" />
        {{ t('settings.about.updates') }}
      </h2>

      <div class="space-y-4">
        <div class="flex items-center justify-between p-4 bg-success/10 border border-success/20 rounded-lg">
          <div class="flex items-center">
            <i class="i-mdi-check-circle w-6 h-6 text-success mr-3" />
            <div>
              <div class="font-medium text-foreground">{{ t('settings.about.currentLatest') }}</div>
              <div class="text-sm text-muted-foreground"
                >{{ t('settings.about.lastCheck') }}: {{ updateInfo.lastCheck }}</div
              >
            </div>
          </div>
          <button
            class="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors"
            @click="checkForUpdates">
            {{ t('settings.about.checkUpdates') }}
          </button>
        </div>

        <!-- 更新历史 -->
        <div>
          <h3 class="text-sm font-medium text-foreground mb-3">{{ t('settings.about.updateHistory') }}</h3>
          <div class="space-y-3 max-h-60 overflow-y-auto">
            <div v-for="update in updateHistory" :key="update.version" class="border border-border rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <div class="flex items-center">
                  <span class="font-medium text-foreground">v{{ update.version }}</span>
                  <span
                    :class="[
                      'ml-2 px-2 py-1 text-xs rounded-full',
                      update.type === 'major'
                        ? 'bg-error/20 text-error'
                        : update.type === 'minor'
                          ? 'bg-warning/20 text-warning'
                          : 'bg-info/20 text-info'
                    ]">
                    {{ t(`settings.about.updateTypes.${update.type}`) }}
                  </span>
                </div>
                <span class="text-sm text-muted-foreground">{{ update.date }}</span>
              </div>
              <p class="text-sm text-muted-foreground mb-2">{{ update.description }}</p>
              <div class="space-y-1">
                <div
                  v-for="feature in update.features"
                  :key="feature"
                  class="text-sm text-foreground flex items-center">
                  <i class="i-mdi-circle-small w-4 h-4 text-primary mr-1" />
                  {{ feature }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 技术信息 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-cog-outline mr-2 w-5 h-5" />
        {{ t('settings.about.techInfo') }}
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <h3 class="text-sm font-medium text-foreground mb-3">{{ t('settings.about.systemInfo') }}</h3>
          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-muted-foreground">{{ t('settings.about.system.os') }}</span>
              <span class="text-foreground">{{ systemInfo.os }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted-foreground">{{ t('settings.about.system.arch') }}</span>
              <span class="text-foreground">{{ systemInfo.arch }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted-foreground">{{ t('settings.about.system.memory') }}</span>
              <span class="text-foreground">{{ systemInfo.memory }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted-foreground">{{ t('settings.about.system.cpu') }}</span>
              <span class="text-foreground">{{ systemInfo.cpu }}</span>
            </div>
          </div>
        </div>

        <div>
          <h3 class="text-sm font-medium text-foreground mb-3">{{ t('settings.about.techStack') }}</h3>
          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-muted-foreground">Vue.js</span>
              <span class="text-foreground">{{ techStack.vue }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted-foreground">TypeScript</span>
              <span class="text-foreground">{{ techStack.typescript }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted-foreground">Tailwind CSS</span>
              <span class="text-foreground">{{ techStack.tailwind }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted-foreground">Vite</span>
              <span class="text-foreground">{{ techStack.vite }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 许可证和法律 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-file-document-outline mr-2 w-5 h-5" />
        {{ t('settings.about.license') }}
      </h2>

      <div class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <button
            class="p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors text-left"
            @click="showLicense">
            <i class="i-mdi-file-document w-5 h-5 text-primary mb-2" />
            <div class="font-medium text-foreground">{{ t('settings.about.softwareLicense') }}</div>
            <div class="text-sm text-muted-foreground">{{ t('settings.about.softwareLicenseDescription') }}</div>
          </button>

          <button
            class="p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors text-left"
            @click="showPrivacyPolicy">
            <i class="i-mdi-shield-account w-5 h-5 text-primary mb-2" />
            <div class="font-medium text-foreground">{{ t('settings.about.privacyPolicy') }}</div>
            <div class="text-sm text-muted-foreground">{{ t('settings.about.privacyPolicyDescription') }}</div>
          </button>

          <button
            class="p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors text-left"
            @click="showTerms">
            <i class="i-mdi-file-check w-5 h-5 text-primary mb-2" />
            <div class="font-medium text-foreground">{{ t('settings.about.termsOfService') }}</div>
            <div class="text-sm text-muted-foreground">{{ t('settings.about.termsOfServiceDescription') }}</div>
          </button>
        </div>
      </div>
    </div>

    <!-- 技术支持 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-help-circle mr-2 w-5 h-5" />
        {{ t('settings.about.support') }}
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <button
          class="p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors text-left"
          @click="openDocumentation">
          <i class="i-mdi-book-open w-5 h-5 text-primary mb-2" />
          <div class="font-medium text-foreground">{{ t('settings.about.documentation') }}</div>
          <div class="text-sm text-muted-foreground">{{ t('settings.about.documentationDescription') }}</div>
        </button>

        <button
          class="p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors text-left"
          @click="openFeedback">
          <i class="i-mdi-message-alert w-5 h-5 text-primary mb-2" />
          <div class="font-medium text-foreground">{{ t('settings.about.feedback') }}</div>
          <div class="text-sm text-muted-foreground">{{ t('settings.about.feedbackDescription') }}</div>
        </button>

        <button
          class="p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors text-left"
          @click="openCommunity">
          <i class="i-mdi-account-group w-5 h-5 text-primary mb-2" />
          <div class="font-medium text-foreground">{{ t('settings.about.community') }}</div>
          <div class="text-sm text-muted-foreground">{{ t('settings.about.communityDescription') }}</div>
        </button>

        <button
          class="p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors text-left"
          @click="openContact">
          <i class="i-mdi-email w-5 h-5 text-primary mb-2" />
          <div class="font-medium text-foreground">{{ t('settings.about.contact') }}</div>
          <div class="text-sm text-muted-foreground">{{ t('settings.about.contactDescription') }}</div>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { t } from '@/i18n';

// 应用信息
const appInfo = ref({
  name: 'Joythink AI',
  description: '智能AI助手，让工作更高效',
  version: '1.0.0',
  releaseDate: '2024-12-01',
  buildNumber: '20241201.001',
  electronVersion: '28.0.0',
  nodeVersion: '18.17.0'
});

// 更新信息
const updateInfo = ref({
  lastCheck: '2024-12-01 10:30:00'
});

// 更新历史
const updateHistory = ref([
  {
    version: '1.0.0',
    type: 'major',
    date: '2024-12-01',
    description: '首个正式版本发布',
    features: ['全新的用户界面设计', '支持多种AI模型', '智能聊天功能', '数据备份和恢复']
  },
  {
    version: '0.9.5',
    type: 'minor',
    date: '2024-11-25',
    description: '功能完善和性能优化',
    features: ['优化聊天响应速度', '新增快捷键支持', '修复已知问题', '改进用户体验']
  },
  {
    version: '0.9.0',
    type: 'minor',
    date: '2024-11-15',
    description: 'Beta版本发布',
    features: ['基础聊天功能', '设置页面', '主题切换', '数据存储']
  }
]);

// 系统信息
const systemInfo = ref({
  os: 'Windows 11 Pro',
  arch: 'x64',
  memory: '16 GB',
  cpu: 'Intel Core i7-12700K'
});

// 技术栈
const techStack = ref({
  vue: '3.4.0',
  typescript: '5.2.0',
  tailwind: '3.3.0',
  vite: '5.0.0'
});

// 检查更新
const checkForUpdates = () => {
  console.log('检查更新...');
  updateInfo.value.lastCheck = new Date().toLocaleString('zh-CN');
  alert(t('settings.about.updateNotAvailable'));
};

// 显示许可证
const showLicense = () => {
  console.log('显示软件许可证');
  alert(t('settings.about.softwareLicenseDescription'));
};

// 显示隐私政策
const showPrivacyPolicy = () => {
  console.log('显示隐私政策');
  alert(t('settings.about.privacyPolicyDescription'));
};

// 显示服务条款
const showTerms = () => {
  console.log('显示服务条款');
  alert(t('settings.about.termsOfServiceDescription'));
};

// 打开意见反馈
const openFeedback = () => {
  console.log('打开意见反馈');
  alert(t('settings.about.feedbackDescription'));
};

// 打开用户社区
const openCommunity = () => {
  console.log('打开用户社区');
  alert(t('settings.about.communityDescription'));
};

// 打开使用文档
const openDocumentation = () => {
  console.log('打开使用文档');
  alert(t('settings.about.documentationDescription'));
};

// 打开联系我们
const openContact = () => {
  console.log('打开联系我们');
  alert(t('settings.about.contactDescription'));
};
</script>

<style scoped>
.about-settings {
  max-width: 1000px;
}
</style>
